<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e4e7ed; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); background-color: #fff;"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <h2 style="text-align: center; margin-bottom: 20px; color: #303133;">菜单添加表单</h2>
      <el-form-item label="父级菜单" prop="pId">
        <el-select v-model="ruleForm.pId" placeholder="请选择菜单">
          <el-option
            v-for="item in getMenuList"
            :key="item.id"
            :label="item.menuName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="ruleForm.menuName" placeholder="请输入菜单名称" />
      </el-form-item>
      <el-form-item label="跳转的Url地址" prop="url">
        <el-input v-model="ruleForm.url" placeholder="请输入跳转的Url地址" />
      </el-form-item>
      <el-form-item style="text-align: center; margin-top: 20px;">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
  import axios from 'axios';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { useCounterStore } from '@/stores/counter';
  import {read,write} from '@/axios/axiosHelper'
  
  // 获取计数器存储实例
  const store = useCounterStore();
  
  // 定义表单数据类型
  interface RuleForm {
    pId: string;
    menuName: string;
    url: string;
    createBy: number;
  }
  
  // 定义表单大小
  const formSize = ref<ComponentSize>('default');
  // 定义表单引用
  const ruleFormRef = ref<FormInstance>();
  // 初始化表单数据
  const ruleForm = reactive<RuleForm>({
    pId: '',
    menuName: '',
    url: '',
    createBy: store.counterStore.userId,
  });
  
  // 定义表单验证规则
  const rules = reactive<FormRules<RuleForm>>({
    menuName: [
      { required: true, message: '请输入菜单名称', trigger: 'blur' },
    ],
    pId: [
      {
        required: true,
        message: '请选择父级菜单',
        trigger: 'change',
      },
    ],
    url: [
      {
        required: true,
        message: '请输入跳转的Url地址',
        trigger: 'change',
      },
    ],
  });
  
  // 定义菜单列表
  const getMenuList = ref<any[]>([]);
  
  // 生命周期钩子函数，在组件挂载后执行
  onMounted(() => {
    getMenu();
  });
  
  // 获取菜单列表的函数
  const getMenu = () => {
    read.get('/read/api/Main/GetMenu').then((res) => {
      getMenuList.value = res.data.data;
      console.log("菜单",getMenuList.value);
    });
  };
  
  // 提交表单的函数
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        write.post('/write/api/Menu/AddMenu', ruleForm).then((res) => {
          if (res.data.code === 200) {
            ElMessage.success({
              message: '添加成功',
              type: 'success',
            });
          } else if (res.data.code === 602) {
            ElMessage.error({
              message: '菜单名称已存在',
              type: 'error',
            });
          } else {
            ElMessage.error({
              message: '添加失败',
              type: 'error',
            });
          }
        });
      } else {
        console.log('error submit!', fields);
      }
    });
  };
  </script>